<template>
  <div class="mainBox">
      <div class="container">
          <el-button type="primary" size="small" @click="dialogFormVisible = true" icon="el-icon-plus">添加用户组</el-button>
          <!--
            <span>产品:</span>
          <el-select clearable style="width:200px" class="filter-item" v-model="listQuery.params.prodId" placeholder="全部">
              <el-option v-for="item in prodData" :key="item.name" :label="item.name" :value="item.value">
              </el-option>
          </el-select>
          -->
      </div>
      <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="id"
              label="ID"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="create_at"
              label="创建时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="desc"
              label="描述"
              width="180">
            </el-table-column>
            <el-table-column
              prop="max_num"
              label="最大值">
            </el-table-column>
            <el-table-column
              prop="min_int"
              label="最小值">
            </el-table-column>
            <el-table-column
              prop="update_at"
              label="更新时间">
            </el-table-column>
            <el-table-column
              label="状态"
              width="120"
              align="center"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.status == '1' ? 'success' : 'danger'"
                    close-transition>{{scope.row.status | statusFilter}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  :type="scope.row.status === 1 ? '':'success'"
                  @click="statusHandleEdit(scope.$index, scope.row)">{{scope.row.status === 1 ? '禁用' : '启用'}}</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pagination-container" style="margin-top: 20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

          <!-- dialog 添加用户组-->
          <el-dialog title="用户组" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="">
              <el-form-item label="用户名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入用户名称" auto-complete="off"></el-input>
              </el-form-item>
              <!--
              <el-form-item label="用户组" >
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              -->
              <el-form-item label="用户组描述" prop="desc">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入用户组描述"
                  v-model="form.desc">
                </el-input>
              </el-form-item>
              <el-form-item label="呼叫最大次数" prop="max_num">
                <el-input v-model.number="form.max_num" placeholder="请输入呼叫最大次数" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="呼叫最小间隔" prop="min_int">
                <el-input v-model.number="form.min_int" placeholder="请输入呼叫最小间隔" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-switch 
                  v-model="status_Boolean"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="add_switchChange"
                  >
                  </el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <!--<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
            </div>
          </el-dialog>
  </div>
</template>


<script>
import {getUserGroup,addUserGroup,delUserGroup,UserGroupDetail,updateUserGroup} from '@/api/userGroup'
export default{
  data() {
    return {
      tableData:[],
      total:0,
      pageSize: 10, 
      currentPage: 1,
      dialogFormVisible: false,
      form:{
        name: '',
        max_num: '',
        min_int:'',
        desc: '',
        status: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入用户组名称', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入用户组描述', trigger: 'blur' }
        ],
        min_int: [
          { required: true, message: '请输入呼叫最大次数', trigger: 'blur' },
          { type: 'number', message: '必须为数字值'}
        ],
        max_num: [
          { required: true, message: '请输入呼叫最小间隔', trigger: 'blur' },
          { type: 'number', message: '必须为数字值'}
        ]
      },
      operType: 1, // 1 add; 2 update
      userGroupId:'',
      status: '1',
      status_Boolean: true
    }
  },
  created(){
    this.getUserGroupList();
  },
  methods: {
    //获取用户组list
    getUserGroupList(){
      getUserGroup({
        page: this.currentPage,
        per_page: this.pageSize
      },response=> {
        const res = response.data
        if(res.code == 1){
          this.tableData = (res.data).items
          this.total = (res.data).total
        }
      })
    },
    //保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.operType == 1){
            this.addUserGroupFun()
          }else{
            this.updateUserGroupFun()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //添加用户组
    addUserGroupFun(){
      addUserGroup(this.form, response=> {
        const res = response.data;
        if(res.code == 1){
          this.$message.success('添加成功')
          this.dialogFormVisible = false
          this.getUserGroupList();
        }
      })
    },
    //更新
    updateUserGroupFun(){
      updateUserGroup(this.userGroupId, this.form, response=> {
        const res = response.data;
        if(res.code === 1){
          this.$message.success('更新成功')
          this.getUserGroupList();
          this.dialogFormVisible = false
        }
      })
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //详情
    handleEdit(index, row) {
      // console.log(index, row);
      this.userGroupId = row.id
      this.operType = 2
      this.dialogFormVisible = true
      UserGroupDetail(row.id, response=> {
        const res = response.data;
        if(res.code === 1){
          this.form = res.data;
          this.status_Boolean = (res.data.status === 1) ? true : false
        }
      })
    },
    //删除
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUserGroup(row.id, response=> {
            if(response.status == 204){
              this.getUserGroupList()
              this.$message.success('删除成功')
            }
          })
        }).catch(() => {
        });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getUserGroupList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getUserGroupList();
    },
    //dialog close
    closeDialog(){
      this.operType = 1;
    },
    //用户状态切换
    statusHandleEdit(index, row){
      this.userGroupId = row.id
      updateUserGroup(this.userGroupId, {
        "status": row.status === 1 ? 0 : 1
      }, response=> {
        const res = response.data;
        if(res.code === 1){
          this.$message.success('操作成功')
          this.getUserGroupList();
        }
      })
    },
    //添加switch
    add_switchChange(val){
      this.form.status = val ? 1 : 0
    },
    statusFilter(val){
      return (val).toString()
    }
  },
  filters:{
    statusFilter(val){
      let text = '';
      if(val == '0'){
        text = '禁用'
      }else if(val == '1'){
        text = '启用'
      }
      return text;
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .mainBox{
    padding: 0px;
    margin-bottom: 20px;
  }
  .container {
    margin: 10px 0px;
  }
</style>
